<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Xiao Huan云笔记</title>
    <link rel="icon" type="shortcut icon" href="/img/favicon.png">
    <link rel="stylesheet" href="/css/note.css">
    <link rel="stylesheet" href="/css/noteCommon.css"/>
	<link rel="stylesheet" href="/css/animate.css" />
</head>
<body>
    <div class="nav">
    <!--   头部导航 navigator     -->
        <img src="/img/CfengNet.png" alt="logo">
        <span class="logoTitle animated headShake">Xiao Huan CloudNote</span>
        <!-- 无意义的，为了撑开布局空间 -->
        <span class="spacer"></span>
        <a href="#">Cloud主页</a>
        <a href="/sys/toNoteEdit">写笔记</a>
        <a href="/sys/toIndex" >返回首页</a>
    </div>
    <div class="container">
        <!--  内容区-->
        <div class="container-left">
         <!--  左侧个人信息-->
            <div class="card">
                <img th:src="@{${chatUser.userHeaderImg}}" alt="headImg" class="avatar">
                <h3>[[${chatUser.userName}]]</h3>
                <a href="https://gitee.com/zhang-junning-huan" target="_blank">Git地址</a>
                <!--                新的浏览器窗口打开新链接-->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>[[${noteNumber}]]</span>
                    <span>2</span>
                </div>
            </div>
            
        </div>
        <div class="container-right">
        <!--  文章列表  -->
            <div class="note" th:each="note : ${userNoteList}">
                <div class="title animated fadeIn" th:text="${note.noteTitle}"></div>
                <div class="date" th:text="${#temporals.format(note.noteCreateTime,'yyyy-MM-dd HH:mm:ss')}"></div>
                <div class="desc" th:text="${note.noteDescription}"></div>
                <a class="detail" th:href="@{/note/{noteId}(noteId=${note.id})}">查看正文 &gt;&gt;</a>
        </div>
    </div>
<script src="/js/JQuerym.js"></script>
<script type="application/javascript">
	//进入时加载title为随机color
	$(function() {
		$(".title").each(function() {
			$(this).css("color",'#' + Math.random().toString(16).slice(2,8));
		})
	})
</script>
</body>
</html>
